import './jcbg.scss'
import { LeftOutline, UserCircleOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { RightOutlined } from '@ant-design/icons'

function Jcbg() {
    const navigate = useNavigate()
    return (
        <div className='jcbg'>
            <div className='jcbg-top'>
                <span>{<LeftOutline className='jcbg-top-left' onClick={() => navigate(-1)}></LeftOutline>}</span>
                <span className='jcbg-top-title'>检查报告详情</span>
            </div>
            <div className='jcbg-bg'>
                <div className='report-detail'>
                    {/* 报告标题 */}
                    <div className='report-title-section'>
                        <h1 className='main-title'>双肾及肾血管彩色多普勒</h1>
                        <p className='patient-info'>王小美 女 28岁</p>
                    </div>

                    {/* 报告元数据 */}
                    <div className='report-metadata'>
                        <div className='metadata-left'>
                            <div className='metadata-item'>
                                <span className='label'>送检医师:</span>
                                <span className='value'>王小美</span>
                            </div>
                            <div className='metadata-item'>
                                <span className='label'>送检时间:</span>
                                <span className='value'>2020-01-01 10:20:36</span>
                            </div>
                            <div className='metadata-item'>
                                <span className='label'>报告时间:</span>
                                <span className='value'>2020-01-20 20:20:30</span>
                            </div>
                            <div className='metadata-item'>
                                <span className='label'>报告类别:</span>
                                <span className='value'>门诊/住院</span>
                            </div>
                        </div>
                        <div className='metadata-right'>
                            <div className='metadata-item'>
                                <span className='label'>送检科室:</span>
                                <span className='value'>门诊放射科</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className='report-section-container'>
                {/* 检查结果 */}
                <div className='report-section'>
                    <h3 className='section-title'>检查结果</h3>
                    <p className='section-content'>未查询出任何异常,注意饮食规律,生活作息调节</p>
                </div>

                {/* 诊断意见 */}
                <div className='report-section'>
                    <h3 className='section-title'>诊断意见</h3>
                    <p className='section-content'>双肺数枚实性小结节,考虑慢性炎性结节或硬结节,请随访。</p>
                </div>
            </div>
            {/* 检测人员信息 */}
            <div className='report-personnel'>
                <div className='personnel-row'>
                    <span className='personnel-item'>检测人: 李医生</span>
                    <span className='personnel-item2'>审核人: 王医生</span>
                </div>
                <div className='remarks'>
                    备注: 此结果仅作参考,以医院纸质报告为准。
                </div>
            </div>
            {/* 检查影像 */}
            <div className='report-images'>
                <div className='images-header'>
                    <span className='images-title'>检查影像</span>
                    <span className='images-copy'>申请影像复印(未开启) {<RightOutlined />}</span>
                </div>
            </div>
        </div>
    )
}

export default Jcbg